<template>
	<view class="emoji">
		<view class="emoji__head">
			<view class="emoji__head-item" :class="{'active': emojiType === 1}" @click="emojiType = 1">
				<image class="tb-nv" src="/static/img/chat/bq.png" mode="aspectFill"></image>
			</view>
			<view class="emoji__head-item" :class="{'active': emojiType === 2}" @click="emojiType = 2">
				<uni-icons type="heart" size="46rpx"></uni-icons>
			</view>
		</view>
		<view class="emoji__main">
			<view class="emoji__main-top">
				<view class="zoom"></view>
			</view>
			<scroll-view v-show="emojiType === 1" class="emoji__main-content" :scroll-y="true" :show-scrollbar="false">
				<view class="emoji__main-content-item">
					<text class="text">最近使用</text>
					<view class="box lately">
						<view class="box-item" v-for="(emoji, key) in chat.latelyEmojiList" :key="emoji"
							@click="onClick(emoji, key)">
							<text class="box-item-text">{{emoji}}</text>
						</view>
					</view>
				</view>
				<view class="emoji__main-content-item">
					<text class="text">所有表情</text>
					<view class="box">
						<view class="box-item" v-for="(emoji, key) in chat.emojiList" :key="emoji"
							@click="onClick(emoji, key)">
							<text class="box-item-text">{{emoji}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		useChatStore,
	} from '@/stores/chat';
	import {
		storeToRefs,
	} from 'pinia';

	const chat = useChatStore();

	const emits = defineEmits(['on-emoji']);

	let {
		msgMap,
		emojiType,
	} = storeToRefs(chat);

	const onClick = (emoji, key) => {
		emits('on-emoji', {
			emoji,
			key,
		});
	}
</script>

<style lang="scss" scoped>
	view {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.emoji {
		&__head {
			height: 60px;
			background-color: #f5f5f5;
			flex-direction: row;
			align-items: center;
			border-bottom: 1rpx solid #ccc;

			&-item {
				padding: 20rpx;
				margin-left: 25rpx;
				border-radius: 10rpx;

				.tb-nv {
					width: 45rpx;
					height: 45rpx;
				}
			}

			.active {
				background-color: #fff;
			}
		}

		&__main {
			height: 280px;
			background-color: #EfEfEf;

			&-top {
				height: 30px;
				justify-content: center;
				align-items: center;

				.zoom {
					width: 40px;
					height: 4px;
					border-radius: 4rpx;
					background-color: #ccc;
				}
			}

			&-content {
				flex: 1;
				padding: 0 30rpx;
				overflow: hidden;

				&-item {

					.text {
						font-size: 13px;
					}

					.box {
						margin-top: 15px;
						margin-bottom: 5px;
						flex-direction: row;
						flex-wrap: wrap;

						&-item {
							width: calc(690rpx / 8);
							height: calc(690rpx / 8);
							justify-content: center;
							align-items: center;

							&-text {
								font-size: 50rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
